<template>
    <div class="content">
        <div class="top">
            <div class="left">
                年级：
                <el-select v-model="select" placeholder="Select" style="width: 170px">
                    <el-option label="一年级" value="1" />
                    <el-option label="二年级" value="2" />
                    <el-option label="三年级" value="3" />
                </el-select>
            </div>

            <div class="right">
                <el-button color="#FF8417"><span style="color: white;">不需要审核</span> </el-button>
                <el-button type="success">需要审核</el-button>
                <el-button color="#12CC9F"><span style="color: white;">仅班主任可以审核</span></el-button>
            </div>
        </div>
        <div class="mid">
            <el-table :data="Data" stripe border style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="序号" width="80" />
                <el-table-column prop="name" label="班级" />
                <el-table-column prop="chose" label="家长发布是否需要审核" />
                <el-table-column prop="chose2" label="家长发布是否仅班主任可以审核" width="250" />
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const select = ref()
const Data = [
    {
        id: 1,
        name: '一年级',
        chose: '是',
        chose2: '是'
    },
    {
        id: 2,
        name: '二年级',
        chose: '否',
        chose2: '是'
    },
    {
        id: 2,
        name: '二年级',
        chose: '否',
        chose2: '是'
    },
    {
        id: 2,
        name: '二年级',
        chose: '否',
        chose2: '是'
    }
]
</script>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: hidden;
}

.top {
    width: 1000px;
    margin: 20px auto;
    /* background: red; */
    display: flex;
    justify-content: space-between;
}

.mid {
    width: 1000px;
    margin: auto;
    margin-top: 10px;
}

.right {
    color: #fff;
}
</style>